<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-gauge-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'gauge'
    }
  },

  computed: {
    serisedata () {
      return {
        lineType: this.lineType,
        radiusLength: this.radiusLength,
        showAxisLine: this.showAxisLine,
        axisLineWidth: this.axisLineWidth,
        showAxisLabel: this.showAxisLabel,
        showAxisTick: this.showAxisTick,
        showAxisSplitLine: this.showAxisSplitLine,
        showTitle: this.showTitle,
        detailLabel: this.detailLabel,
        detailFontSize: this.detailFontSize,
        detailFontFamily: this.detailFontFamily,
        detailColor: this.detailColor,
        showPointer: this.showPointer,
        pointerLength: this.pointerLength,
        pointerWidth: this.pointerWidth,
        dataTop: this.dataTop,
        dataLeft: this.dataLeft,
        splitLineColor: this.splitLineColor,
        axisTickColor: this.axisTickColor
      }
    },
    option () {
      return {
        // color: this.colors,
        grid: {
          show: this.showGrid,
          left: this.gridLeft === '' ? 'auto' : this.gridLeft,
          top: this.gridTop === '' ? 'auto' : this.gridTop,
          right: this.gridRight === '' ? 'auto' : this.gridRight,
          bottom: this.gridBottom === '' ? 'auto' : this.gridBottom,
          borderWidth: 0,
          containLabel: true
        },
        tooltip: {
          trigger: this.triggerType,
          confine: this.confine,
          extraCssText: this.confine ? 'white-space: normal; word-break: break-all;' : '',
          formatter: this.useTooltipFun ? this.tooltipFunction : this.tooltipLabel
        },
        // dataset: {
        //   source: this.data
        // },
        series: this.series
      }
    }
  },

  methods: {
    setSeries () {
      let vm = this
      let length = this.data.length
      let detailLabel = this.detailLabel

      this.series = []
      let lineType = this.lineType.split(';')
      let lineColors = []

      if (lineType.length > 0) {
        let num = 0
        lineType.forEach((item, index) => {
          if (item.indexOf(':') > -1) {
            let a = item.split(':')
            let b = a[1].split(',')
            let c = []
            b.forEach((itm, idx) => {
              c.push(
                {
                  offset: itm,
                  color: vm.colors[num]
                }
              )
              num += 1
            })

            lineColors.push(
              [
                a[0],
                new echarts.graphic.LinearGradient(0, 0, 1, 0, c)
              ]
            )
          } else {
            lineColors.push(
              [
                item,
                vm.colors[num]
              ]
            )
          }
          num += 1
        })
      }

      for (let i = 0; i <= length - 1; i++) {
        this.series.push({
          name: this.data[i].name,
          type: this.chartType,
          radius: this.radiusLength,

          axisLine: {
            show: this.showAxisLine,
            lineStyle: this.lineType === '' ? {} : {
              width: this.axisLineWidth,
              color: lineColors,
            },
          },
          pointer: {
            show: this.showPointer,
            length: this.pointerLength,
            width: this.pointerWidth
          },
          axisLabel: {
            show: this.showAxisLabel
          }, //刻度标签。
          axisTick: {
            show: this.showAxisTick,
            lineStyle: {
              color: this.axisTickColor
            }
          }, //刻度样式
          title: {
            show: this.showTitle
          },
          splitLine: {
            show: this.showAxisSplitLine,
            lineStyle: {
              color: this.splitLineColor
            }
          }, //分隔线样式
          detail: {
            formatter: '{a|{value}}' + '{b|' + detailLabel + '}',
            offsetCenter: [vm.dataLeft, vm.dataTop],
            rich: {
              a: {
                fontFamily: this.detailFontFamily,
                color: this.detailColor,
                fontSize: this.detailFontSize,
              },
              b: {
                color: this.detailColor,
                fontFamily: this.detailFontFamily,
                lineHeight: this.detailFontSize,
                fontSize: this.detaillabelFontSize,
                verticalAlign: 'bottom',
              }
            }
          },
          data: [{... this.data[i]}]
        })
      }
    }
  },

  watch: {
    serisedata: {
      deep: true,
      handler () {
        this.setSeries()
      }
    },
    colors: {
      deep: true,
      handler () {
        this.setSeries()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
